<style>
    #notificationMenu {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        background: #fff;
        border-radius: 6px;
        padding: 10px 0;
        width: 300px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }

    #notificationItem {
        display: block !important;
    }

    #notificationIcon {
        display: inline-block;
    }

    #notificationMenu .menu li {
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    #notificationMenu .menu li:hover {
        background-color: #f7f7f7;
    }

    #notificationMenu .menu {
        max-height: 250px;
        overflow-y: auto;
    }

    .badge {
        position: relative;
        top: -10px;
        right: -10px;
    }
</style>
<!-- Logo -->
<a href="javascript:;" class="logo">
    <!-- 迷你模式下Logo的大小为50X50 -->
    <span class="logo-mini">{$site.name|mb_substr=0,4,'utf-8'|mb_strtoupper='utf-8'|htmlentities}</span>
    <!-- 普通模式下Logo -->
    <span class="logo-lg">{$site.name|htmlentities}</span>
</a>

<!-- 顶部通栏样式 -->
<nav class="navbar navbar-static-top">

    <!--第一级菜单-->
    <div id="firstnav">
        <!-- 边栏切换按钮-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">{:__('Toggle navigation')}</span>
        </a>

        <!--如果不想在顶部显示角标,则给ul加上disable-top-badge类即可-->
        <ul class="nav nav-tabs nav-addtabs disable-top-badge hidden-xs" role="tablist">
            {$navlist}
        </ul>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">

                <!-- 通知图标 -->

                <li id="notificationItem" class="dropdown notifications-menu" style="display: block;">
                    <audio id="timi_audio">
                        <source src="/notification.mp3" type="audio/mpeg">
                    </audio>
                    <a href="#" id="notificationIcon">
                        <i class="fa fa-bell"></i>
                        <span id="notificationBadge" class="badge badge-danger">{$notice|default=0}</span>
                    </a>
                    <ul id="notificationMenu" class="dropdown-menu">
                        <li style="padding: 10px; display: flex; justify-content: space-between; align-items: center;">
                            <a href="javascript:void(0);" id="doNotDisturbButton" style="display: flex; align-items: center;">
                                <i class="fa fa-bell" id="doNotDisturbIcon" style="margin-right: 5px;"></i> 免打扰
                            </a>
                            <a href="javascript:void(0);" id="markAllReadButton">
                                <i class="fa fa-check-circle"></i> 一键已读
                            </a>
                        </li>
                        <li>
                            <ul id="notificationList" class="menu"></ul>
                        </li>
                    </ul>
                </li>


                <!-- 多语言列表 -->
                {if $Think.config.lang_switch_on}
                <li class="hidden-xs">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-language"></i></a>
                    <ul class="dropdown-menu">
                        <li class="{$config['language']=='zh-cn'?'active':''}">
                            <a href="?ref=addtabs&lang=zh-cn">简体中文</a>
                        </li>
                        <li class="{$config['language']=='en'?'active':''}">
                            <a href="?ref=addtabs&lang=en">English</a>
                        </li>
                    </ul>
                </li>
                {/if}

                <!-- 账号信息下拉框 -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="{$admin.avatar|cdnurl|htmlentities}" class="user-image" alt="">
                        <span class="hidden-xs">{$admin.nickname|htmlentities}</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header">
                            <img src="{$admin.avatar|cdnurl|htmlentities}" class="img-circle" alt="">

                            <p>
                                {$admin.nickname|htmlentities}
                                <small>{$admin.logintime|date="Y-m-d H:i:s",###}</small>
                            </p>
                        </li>
                        <li class="user-body">
                            <div class="visible-xs">
                                <div class="pull-left">
                                    <a href="__PUBLIC__" target="_blank"><i class="fa fa-home"
                                                                            style="font-size:14px;"></i>
                                        {:__('Home')}</a>
                                </div>
                                <div class="pull-right">
                                    <a href="javascript:;" data-type="all" class="wipecache"><i
                                            class="fa fa-trash fa-fw"></i> {:__('Wipe all cache')}</a>
                                </div>
                            </div>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="general/profile" class="btn btn-primary addtabsit"><i class="fa fa-user"></i>
                                    {:__('Profile')}</a>
                            </div>
                            <div class="pull-right">
                                <a href="{:url('index/logout')}" class="btn btn-danger"><i class="fa fa-sign-out"></i>
                                    {:__('Logout')}</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- 控制栏切换按钮 -->
                <li class="hidden-xs">
                    <a href="javascript:;" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
            </ul>
        </div>
    </div>

    {if $Think.config.fastadmin.multiplenav}
    <!--第二级菜单,只有在multiplenav开启时才显示-->
    <div id="secondnav">
        <ul class="nav nav-tabs nav-addtabs disable-top-badge" role="tablist">
            {if $fixedmenu}
            <li role="presentation" id="tab_{$fixedmenu.id}" class="{:$referermenu?'':'active'}"><a
                    href="#con_{$fixedmenu.id}" node-id="{$fixedmenu.id}" aria-controls="{$fixedmenu.id}" role="tab"
                    data-toggle="tab"><i class="fa fa-dashboard fa-fw"></i> <span>{$fixedmenu.title}</span> <span
                    class="pull-right-container"> </span></a></li>
            {/if}
            {if $referermenu}
            <li role="presentation" id="tab_{$referermenu.id}" class="active"><a href="#con_{$referermenu.id}"
                                                                                 node-id="{$referermenu.id}"
                                                                                 aria-controls="{$referermenu.id}"
                                                                                 role="tab" data-toggle="tab"><i
                    class="fa fa-list fa-fw"></i> <span>{$referermenu.title}</span> <span
                    class="pull-right-container"> </span></a> <i class="close-tab fa fa-remove"></i></li>
            {/if}
        </ul>
    </div>
    {/if}
</nav>
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
<script>
    function initNotifications() {
        const notificationIcon = document.getElementById("notificationIcon");
        const notificationMenu = document.getElementById("notificationMenu");
        const notificationList = document.getElementById("notificationList");
        const notificationBadge = document.getElementById("notificationBadge");
        const doNotDisturbButton = document.getElementById("doNotDisturbButton");
        const doNotDisturbIcon = document.getElementById("doNotDisturbIcon");

        let notifications = []; // 初始通知列表
        let doNotDisturb = localStorage.getItem("doNotDisturb") === "true";

        // 更新免打扰图标状态
        function updateDoNotDisturbIcon() {
            doNotDisturbIcon.className = doNotDisturb ? "fa fa-bell-slash" : "fa fa-bell";
            // 同步主通知图标样式
            const notificationIconBell = document.querySelector("#notificationIcon i");
            if (notificationIconBell) {
                notificationIconBell.className = doNotDisturb ? "fa fa-bell-slash" : "fa fa-bell";
            }
        }

        // 切换免打扰模式
        doNotDisturbButton.addEventListener("click", () => {
            doNotDisturb = !doNotDisturb;
            localStorage.setItem("doNotDisturb", doNotDisturb);
            updateDoNotDisturbIcon();
            // 同步主通知图标样式
            const notificationIconBell = document.querySelector("#notificationIcon i");
            if (notificationIconBell) {
                notificationIconBell.className = doNotDisturb ? "fa fa-bell-slash" : "fa fa-bell";
            }
            Toastr.info(doNotDisturb ? "已开启免打扰模式" : "已关闭免打扰模式");
        });

        // 初始化免打扰图标
        updateDoNotDisturbIcon();

        // 一键已读功能
        document.getElementById("markAllReadButton").addEventListener("click", markAllAsRead);
        //全部已读
        function markAllAsRead() {
            $.ajax({
                url: "notice/markAllAsRead",
                method: "POST",
                success: function (data) {
                    if (data.code === 1) {
                        notifications.forEach((notif) => (notif.read = 2)); // 更新本地状态
                        updateNotifications();
                        Toastr.success("全部已读");
                    } else {
                        Toastr.error(data.msg || "一键已读失败");
                    }
                },
                error: function () {
                    Toastr.error("网络错误，无法一键已读");
                },
            });
        }

        // 获取通知列表
        function fetchNotifications() {
            $.ajax({
                url: "notice/noticelist",
                method: "GET",
                success: function (response) {
                    if (response.code === 1 && Array.isArray(response.data)) {
                        notifications = response.data.map((item) => ({
                            id: item.id,
                            text: item.title,
                            read: item.read,
                        }));
                        updateNotifications();
                    } else {
                        Toastr.error(response.msg || "获取通知失败");
                    }
                },
                error: function () {
                    Toastr.error("网络错误，无法获取通知");
                },
            });
        }

        // 更新通知列表和未读数
        function updateNotifications() {
            const fragment = document.createDocumentFragment();
            let unreadCount = 0;

            notificationList.innerHTML = "";
            notifications.forEach((notif) => {
                const li = document.createElement("li");
                li.textContent = notif.text;
                li.style.opacity = notif.read > 1 ? "0.5" : "1";

                if (notif.read == 1) unreadCount++;

                li.addEventListener("click", () => {
                    notif.read = 2
                    updateNotifications();
                    markAsRead(notif.id); // 标记为已读
                });

                fragment.appendChild(li);
            });

            notificationList.appendChild(fragment);
            notificationBadge.textContent = unreadCount;
        }

        // 单个标记为已读
        function markAsRead(id) {
            $.ajax({
                url: "notice/markAsRead",
                method: "GET",
                data: { id: id },
                success: function (data) {
                    if (data.code !== 1) {
                        console.error(data.msg || "标记已读失败");
                    }
                },
                error: function () {
                    Toastr.error("网络错误，无法标记为已读");
                },
            });
        }

        // 点击通知图标时
        notificationIcon.addEventListener("click", () => {
            notificationMenu.classList.toggle("show");
            if (notificationMenu.classList.contains("show")) {
                fetchNotifications();
            }
        });

        // 点击外部关闭菜单
        document.addEventListener("click", (e) => {
            if (!notificationMenu.contains(e.target) && e.target !== notificationIcon) {
                notificationMenu.classList.remove("show");
            }
        });
    }

    // 等待 DOM 加载完成后运行
    document.addEventListener("DOMContentLoaded", initNotifications);
</script>